<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>订单页</title>
		<link rel="stylesheet" href="css/gzh/admin.css" />
		<link rel="stylesheet" href="css/new.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/adminSystem.css" />
		<script src="lib/vue.js"></script>
		<script src="js/gzh/jquery-3.3.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<style type="text/css">
.itemInfo>td{
	
	    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
th:nth-child(1){
	width:35px;
}
th:nth-child(2){
	width:100px;
}
td:nth-child(1){
	width:35px;
}
td:nth-child(2){
	width:100px;
}
td:nth-child(3){
	width:163px;
}
td:nth-child(4){
	width:202px;
}
td:nth-child(5){
	width:202px;
}
td:nth-child(6){
	width:202px;
}
td:nth-child(7){
	width:144px;
}
th:nth-child(7){
	width:144px;
}
td:nth-child(8){
	width:124px;
}
td:nth-child(9){
	width:163px;
}
td:nth-child(10){
	width:203px;
}
td:nth-child(11){
	width:125px;
}
#pageSelect {
	max-width: 1266px;
	height: 100px;
	padding: 30px 30px;
}

#selectContent {
	float: right;
	margin: auto 20px;
	height: 40px;
}
#selectContent .disablebtn{
	disabled:true;
	pointer-events: none;
	opcity:0.5;
	color:gray;
}
#selectContent .option {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border: 1px solid gainsboro;
	text-align: center;
	float: left;
	margin: 5px;
	color: #666;
}

#selectContent .option:hover {
	background: #3A3A3A;
	color: white;
}
.fa-eye:before {
    content: "\f06e";
}
		</style>
	</head>
	<body class="fixed skin-blue">
		<div class="wrapper" style="height: auto;">
			<header class="main-header">
				<div class="logo">
					<span class="logo-lg"><b>VMALL</b>后台管理</span>
				</div>
				<nav class="navbar navbar-static-top">
	                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
	                    <span class="sr-only glyphicon glyphicon-th-list"></span>
	                </a>
	
	                <!--顶部菜单 开始-->
	                <div id="menu" class="navbar-custom-menu">
	                    <ul class="nav navbar-nav" name="topMenu">
	                                <li><a hidefocus="true" href="/goods/goods_list">商品</a></li>
	                                <li><a hidefocus="true" href="/member/member_list">会员</a></li>
	                                <li><a hidefocus="true" href="/order/order_list">订单</a></li>
	                                <li><a hidefocus="true" href="/market/pro_rule_list">营销</a></li>
	                                <li><a hidefocus="true" href="/market/user_reg">统计</a></li>
	                                <li class="active"><a hidefocus="true" href="/system/default">系统</a></li>
	                                <li><a hidefocus="true" href="/tools/db_bak">工具</a></li>
	                                <li><a hidefocus="true" href="/plugins/plugin_list">插件</a></li>
	                                <li>
	                            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
	                        </li>
	                    </ul>
	                </div>
	                 <!--顶部菜单 结束-->
	            </nav>
			</header>
			
			<aside id="admin_left" class="main-sidebar">
	            <section class="sidebar" style="height: auto;">
	                <div class="user-panel">
						<div class="pull-left image">

							<i class="glyphicon glyphicon-user"></i>
						</div>
						<div class="pull-left info">
							<p>admin</p>
							<a href="#">超级管理员</a>
						</div>
					</div>

					<ul class="sidebar-menu tree" data-widget="tree">
						<li class="header">订单模块菜单</li>
						<li class="treeview menu-open">
							<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
								<i class="fa fa-home" name="ico" menu="订单管理"></i>
								<span>订单管理</span>
								<span class="pull-right-container">
									<i class="glyphicon glyphicon-chevron-down pull-right"></i>
								</span>
							</a>
							<ul id="collapseOne" class="treeview-menu" name="leftMenu" style="display: block;">
								<li class="active">
									<a href="/system/default"><i class="fa fa-circle-o"></i>订单列表</a>
								</li>
								<li class="">
									<a href="gzh-admin-addGoods.html"><i class="fa fa-circle-o"></i>添加订单</a>
								</li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
								<i class="fa fa-wrench" name="ico" menu="单据管理"></i>
								<span>单据管理</span>
								<span class="pull-right-container">
									<i class="glyphicon glyphicon-chevron-left pull-right"></i>
								</span>
							</a>
							<ul id="collapseTwo" class="treeview-menu" name="leftMenu">
								<li>
									<a href="/system/conf_base"><i class="fa fa-circle-o"></i>收款单</a>
								</li>
								<li>
									<a href="/system/conf_guide"><i class="fa fa-circle-o"></i>退款单</a>
								</li>
								<li>
									<a href="/system/conf_banner"><i class="fa fa-circle-o"></i>发货单</a>
								</li>
								<li>
									<a href="/system/conf_ui/type/site"><i class="fa fa-circle-o"></i>退款申请列表</a>
								</li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">
								<i class="fa fa-share-alt" name="ico" menu="发货地址"></i>
								<span>发货地址</span>
								<span class="pull-right-container">
									<i class="glyphicon glyphicon-chevron-left pull-right"></i>
								</span>
							</a>
							<ul id="collapseFour" class="treeview-menu" name="leftMenu">
								<li>
									<a href="/system/oauth_list"><i class="fa fa-circle-o"></i>发货地址管理</a>
								</li>
							</ul>
						</li>

					</ul>
		</div>
		
		
			<div id="admin_right" class="content-wrapper" style="min-height: 507px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li>
							<i class="home-icon fa fa-home"></i>
							<a href="#">订单</a>
						</li>
						<li>
							<a href="#">订单管理</a>
						</li>
						<li class="active">订单列表</li>
					</ul>
				</div>
				<div class="content" style="min-height:880px">
					<caption>
						<button type="button" class="btn btn-primary" id="checkAll" data='true'><i class="fa fa-check"></i>全选</button>
						<div class="btn-group">
							<button type="button" class="btn btn-primary"><i class="fa fa-cogs"></i>批量操作</button>
							<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
						      <span class="caret"></span>
						      <span class="sr-only">切换下拉菜单</span></button>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="#" id="deleteAll">批量删除</a>
								</li>
								<li>
									<a href="#" id="sendGood">批量发货</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">导出Excel</a>
								</li>
							</ul>
						</div>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#search"><i class="fa fa-search "></i>检索</button>
					</caption>
					<p id="searchTitle">订单总计：{{listCount}}个</p>
					<table class="table table-list">
					<tbody>
						<tr>
							<th></th>
							<th>订单号</th>
							<th>收货人</th>
							<th>支付状态</th>
							<th>发货状态</th>
							<th>订单状态</th>
							<th>打印</th>
							<th>运费</th>
							<th>用户名</th>
							<th>下单时间</th>
							<th>操作</th>
						</tr>
					</tbody>
					</table>
					<div  id="searchResult">
						<tbody>
						<div id="itemList">
							<item v-for="item in items" v-bind:key="item.userid" v-bind:item="item"></item>
						</div>
						</tbody>
						
							<div id="pageSelect">
								<div id="selectContent">
									<a  v-bind:class="{disablebtn:currentPage<=1}"
										onClick="changePage(this)" 
										:data-pagenum="1"
									 href="#"><div class="option">|<</div></a>
									<a v-bind:class="{disablebtn:currentPage<=1}"
										onClick="changePage(this)" 
										:data-pagenum="currentPage-1"
									 href="#"><div class="option"><</div></a>
									<a v-bind:class="{disablebtn:pageNum==currentPage}"
										onClick="changePage(this)" 
										:data-pagenum="pageNum"
									 	v-for="pageNum in pages" href="#">
										<div class="option">{{pageNum}}</div>
									</a>
									<a v-bind:class="{disablebtn:currentPage>pages-1}"
										onClick="changePage(this)" 
										:data-pagenum="currentPage-(-1)" href="#"><div class="option">></div></a>
									<a v-bind:class="{disablebtn:currentPage>pages-1}"
										onClick="changePage(this)" 
										:data-pagenum="pages"  href="#"><div class="option">>|</div></a>
								</div>
							</div>
						</div>
				</div>
			</div>
			</div>
		<script type="text/javascript">
			$(function() {
				$('#collapseone').collapse('show')
			});
			$(function() {
				$('#collapseTwo').collapse('hide')
			});
			$(function() {
				$('#collapseThree').collapse('hide')
			});
			$(function() {
				$('#collapseFour').collapse('hide')
			});
			$(function() {
				$('#collapseFive').collapse('hide')
			});
			$(function() {
				$('#collapseSix').collapse('hide')
			});
			$(function() {
				$('#collapseSeven').collapse('hide')
			});
			$(function(){
				$("#checkAll").click(function(){
					if ($(this).attr("data")=="true") {
						$(".itemInfo :checkbox").prop("checked", true);
						$(this).attr("data",false);
					}
					else if($(this).attr("data")=="false"){
						$(".itemInfo :checkbox").prop("checked", false);	
						$(this).attr("data",true);
					}
					
				})
			})
		</script>
		

		<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 650px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×            </button>
						<h4 class="modal-title" id="myModalLabel">
		              订单检索          </h4>
					</div>
					<div class="modal-body" style="overflow: hidden;">
						<div class="container1">
							<iframe src="#" name="Opengoods_setting" frameborder="0" allowtransparency="true" style="width: 620px; height: 570px; border: 0px none;"></iframe>

						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭            </button>
						<button type="button" class="btn btn-primary">
		               提交更改            </button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		<div class="modal fade" id="this" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 650px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×            </button>
						<h4 class="modal-title" id="myModalLabel">
		               消息          </h4>
					</div>
					<div class="modal-body" style="overflow: hidden;">
						<div class="container1">
							确定要删除么？

						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消            </button>
						<button type="button" class="btn btn-primary" id="trueDelete">
		               确定           </button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->	
		<script type="text/javascript">
		//将订单列表的数组型字符串转为json数组型对象
		var jsonstr='${requestScope.items}';
		console.log("jsonstr:"+jsonstr);
		var itemList=$.parseJSON(jsonstr);
		console.log(itemList);
		var listCount='${requestScope.listCount}';
		console.log("listCount:"+listCount);
		var pagesize=2;
		var pages=Math.ceil(listCount/2);//总页数
		console.log("pages:"+pages);
		//当前页
		var currentPage='${requestScope.currentPage}';
		console.log("currentPage:"+currentPage);
		var searchTitle=new Vue({
			el:"#searchTitle",
			data:{
				listCount:listCount,
			}
		});
		
		//订单列表
		Vue.component('item', {
			props: ['item'],
			template:`
			<tr class="itemInfo">
				<td><input name="check[]" type="checkbox" class="chk" v-bind:value="item.orderid"></td>
				<td v-bind:title="item.orderid"">{{item.orderid}}</td>
				<td v-bind:title="item.name" name="name">{{item.name}}</td>
				<td v-bind:value="item.payStatus" name="payStatus"></td>
				<td v-bind:value="item.postStatus" name="postStatus"></td>
				<td v-bind:value="item.orderStatus" name="orderStatus"></td>
				<td>
					<a href="#" target="_blank"><span class="badge bg-red" title="购物清单打印">购</span></a>
					<a href="#" target="_blank"><span class="badge bg-green" title="配货单打印">配</span></a>
					<a href="#" target="_blank"><span class="badge bg-yellow" title="联合打印">合</span></a>
					<a href="#" target="_blank"><span class="badge bg-blue" title="发货和快递单打印">递</span></a>
				</td>
				<td v-bind:title="item.postFee">{{item.postFee}}</td>
				<td v-bind:title="item.nickname">{{item.nickname}}</td>
				<td v-bind:title="item.createTime">{{item.createTime}}</td>
				<td>
				<a class="editUser" href="#"><i class="operator fa fa-eye"></i><span style="color:white">{{item.orderid}}</span></a>
				<a class="deletethis" data-toggle="modal" data-target="#this" v-bind:value="item.orderid"><i class="operator fa fa-close" v-bind:value="item.orderid"></i><span style="color:white">{{item.orderid}}</span></a>
				</td>
			</tr>	
			`
			
		});
		
		
		var item = new Vue({
			el: "#itemList",
			data: {
				items: itemList,
			},
		});
		var pageSelect=new Vue({
			el:"#pageSelect",
			data:{
				pages:pages,
				currentPage:currentPage,
			}
		});
		
		//根据页数跳往相应的页数，fcid和scid以及排序方式为默认的
		function changePage(obj){
			var pageNum=$(obj).data("pagenum");
			location.href="AdminMember?method=basefun&"
					+"&viewPage="+pageNum;
			
		}
		
		$(document).ready(function(){
			
			$("td[name='payStatus'][value='" + 0 + "']").text("待支付");
			$("td[name='payStatus'][value='" +1 + "']").text("已支付");
			$("td[name='payStatus'][value='" +2 + "']").text("已退款");
			
			$("td[name='postStatus'][value='" +0 + "']").text("待发货");
			$("td[name='postStatus'][value='" +1 + "']").text("已发货");
			$("td[name='postStatus'][value='" +2 + "']").text("已签收");
			
			$("td[name='orderStatus'][value='" +0 + "']").text("待支付（未支付）");
			$("td[name='orderStatus'][value='" +1 + "']").text("待处理（支付完成）");
			$("td[name='orderStatus'][value='" +2 + "']").text("待售后（提交售后）");
			$("td[name='orderStatus'][value='" +3 + "']").text("已完成（已收货/已处理售后）"); 
			$("td[name='orderStatus'][value='" +4 + "']").text("已取消（取消订单"); 
			
			$("#deleteAll").click(function(){
				var str="";
				    var sel=document.getElementsByName("check[]");//获取checkbox的值
				    for( var i=0;i<sel.length;i++){
				        if(sel[i].checked==true){
					str+=sel[i].value+",";
				}
			}
				
				$.get("AdminOrder?method=delete",{str:str},function(e){
	    			if (e=="ok") {
	    				alert("修改成功");
	    				window.location.href="AdminOrder";
	    			} 
	    			else{
	    				alert("请选择订单！");
	    			}
	    		});
			});
			//订单发货
			$("#sendGood").click(function(){
				var str="";
				    var sel=document.getElementsByName("check[]");//获取checkbox的值
				    for( var i=0;i<sel.length;i++){
				        if(sel[i].checked==true){
					str+=sel[i].value+",";
				}
			}
		
			$.get("AdminOrder?method=sendGood",{str:str},function(e){
    			if (e=="ok") {
    				alert("发货成功");
    				window.location.href="AdminOrder";
    			} 
    			else{
    				alert("请选择订单！");
    			}
    		});
		});
			$(".deletethis").click(function(){
				var orderid= $(this).text();
				alert(orderid)
				$("#trueDelete").click(function(){
				$.get("AdminOrder?method=delete",{str:orderid},function(e){
	    			if (e=="ok") {
	    				alert("删除成功");
	    				window.location.href="AdminOrder";
	    			} 
	    			else{
	    				alert("登录失败");
	    				}
	    			});
				})
			})
		});
		</script>
	</body>
</html>
